可想自己造一个jQuery库？(十一)---事件机制完结

1.虽然说市面上有许多讲解jQuery源码或者是也有类似如何搭建一个属于自己的javascript库的文章。
2.但毕竟更多数人的水平并没有达到单纯看源码解析就能读懂jQuery
3.如果你既不能通过书籍视频和他人文章的源码解析明白jQuery，也想自己实现一个jQuery的。
4.本系列就是以一些不同的方法手段，简单的代码，实现了一套与jQuery一样的API
5.最后在每篇文章的最后会留下github源码地址，希望能得到大家star的认可与支持，谢谢。

Lesson-10

实现on,off的事件委托!

我们能根据之前的思路,利用同样的方法实现一个事件委托.

先来看看流程图

然后先看看结果是如何，毕竟流程图看的也不一定能懂。

最后我们再来看看代码

Kodo.deleEvents = []; //事件委托存放的事件
Kodo.deleId = 0; //事件委托的唯一标识

on: function(type, selector, fn) {
    if (typeof selector == 'function') {
        fn = selector; //两个参数的情况
        //事件绑定过程
    } else { 
        //事件委托过程
        for (var i = 0; i < this.length; i++) {
            if ( !this[i].deleId ) {
                this[i].deleId = ++Kodo.deleId;
                //同样是判断是否有唯一id

                Kodo.deleEvents[Kodo.deleId] = {};
                //没有则创建id对象 也就是f.deleEvents[]新开辟一个新对象

                Kodo.deleEvents[Kodo.deleId][selector] = {};

                //构造 selector对象 
                /*
                *  如 Kodo.deleEvents[1] = 
                *  ｛
                *       "#box li" : {},
                *        "#pox" : {}
                *   ｝
                */

                Kodo.deleEvents[Kodo.deleId][selector][type] = [fn];
                //构造我们的事件数组
                /*
                *  如 Kodo.deleEvents["#box li"] = 
                *  {
                *       "click" : [fn1,fn2...],
                *        "touchstart" : [fn1,fn2....]
                *   }
                */
                delegate(this[i],type,selector);
                //用委托的方式进行绑定
            } else {
                //如果id存在的情况
                var id = this[i].deleId,
                    position = Kodo.deleEvents[id];//委托元素的事件存储位置

                if(!position[selector]) {
                    //先判断如果selector存储的对象不存在
                    position[selector] = {};
                    //新建selector对象 (与上面的selector构造相同)
                    position[selector][type] = [fn];
                    //构造事件数组对象   (与上面的type构造相同)

                    delegate(this[i],type,selector);
                    //因为是新的selector 所以要再绑定
                } else { 
                    //selector 存储对象存在的情况
                    if ( position[selector][type] ) {
                        //如果事件数组已经有了，则直接push进来
                        position[selector][type].push(fn);

                    } else {
                        //如果事件数组没有，那就构造事件数组
                        position[selector][type] = [fn];

                        //因为是新的绑定的事件，所以要重新绑定
                        delegate(this[i],type,selector);
                    }

                }
            }
        }
    }
},

继续再看一遍log的结果，对比刚刚的代码

连同代码，我在注释里已经非常的详细解释了整个过程，大家结合控制台log的结果，在看看最初的流程图结合的看，我相信有点点耐心就能马上理解了。

绑定过程都会比较复杂，理解了绑定过程后，下面off的实现就很容易了。

off本身是可以传2个参数的，第一个参数为事件type，第二个参数是委托元素selector

off: function(type, selector) {
    if (arguments.length == 0) {
        //如果没传参数，清空所有事件

    } else if (arguments.length == 1) {
        //指定一个参数，则清空对应的事件

    } else {
        //直接根据dom上存有的deleId，找到对应的deleEvents里的位置
        //删除委托元素上的type事件数组即可
        for (var i = 0; i < this.length; i++) {
            var id = this[i].deleId;
            delete Kodo.deleEvents[id][selector][type];
        }
    }
}

最后看看我们修改过后的 delegate方法

function delegate(agent, type, selector) {
    var id = agent.deleId; //先获取被委托元素的deleId
    agent.addEventListener(type, function(e) {
        var target = e.target;
        var ctarget = e.currentTarget;
        var bubble = true;

        while (bubble && target != ctarget) {
            if (filiter(agent, selector, target)) {
                for (var i = 0; i < Kodo.deleEvents[id][selector][type].length; i++) {
                    bubble = Kodo.deleEvents[id][selector][type][i].call(target, e);
                    //循环事件数组 直接call
                }
            }
            target = target.parentNode;
            return bubble;
        }
    }, false);

    function filiter(agent, selector, target) {
        //过滤函数
    }
}

这里修改的就只有二个地方

1.获取被委托元素的deleId，因为我们整个委托机制都与他有关。
2.通过id在deleEvents里查找对应的事件数组，循环执行即可

以上就是整个委托的过程！

f("you").on('star','me',function(){
    console.log('success!');
});

github地址: https://github.com/MeCKodo/forchange/tree/master/lessonn-10
可想自己造一个jQuery库？(十)：http://www.imooc.com/article/2148

自由转载-非商用-非衍生-保持署名